Pimp My Message [4] – W3CSS

Posted on by Enno Wulff

Related Post

Dies ist Teil 4 von 5 der Serie Nachrichten

Die Darstellung ist immer noch langweilig. das will ich jetzt ändern. Mit W3CSS…

W3CSS

Um die Darstellung von Langtexten generell (hier nur am Beispiel einer Nachricht) schöner und besser sichtbar zu machen, habe ich W3CSS entdeckt. W3CSS ist ein Framework, mit dem man mit einfachen Befehlen die Darstellung von HTML-Seiten besser machen kann, ohne dass man detaillierte CSS-Definitionen vornehmen muss.

Es lassen sich zum Beispiel einfach Badges darstellen:

<p>Updates <span class="w3-badge">9</span></p>

HTML

Um die Darstellung im HTML-Format mit W3CSS aufzuhübschen, müssen ein paar Definitionen in den HTML-Text eingebaut werden. Die Umwandlung erfolgt mit Funktionsbaustein CONVERT_ITF_TO_HTML.

Absatzformate anpassen

Mit der automatischen Umsetzung der Absatzformate können auch W3CSS-Definitionen eingebaut werden:

    DATA(lt_conv_parformats) = VALUE tline_t(
                   ( tdformat = 'U1' tdline = '<h2><div class="w3-panel w3-blue">' )
                   ( tdformat = 'U2' tdline = '<h3><div class="w3-panel w3-light-blue">' )
                   ( tdformat = 'AS' tdline = '<div class="w3-margin">' ) ).

META-Information für W3CSS

Nachdem die Umwandlung mit Hilfe des Funktionsbausteins erfolgt ist, muss der Link zur W3CSS-Definition eingebaut werden:

    INSERT '<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">' INTO rt_html INDEX 1.

Ausgabe

Die Darstellung sieht nun schon etwas schöner aus, aber es geht noch besser…

Mehr Informationen

Zum Ende dieses Artikels möchte ich noch die Meldung selber am Anfang der Meldung darstellen und darunter den Langtext anzeigen.

So sieht es dann aus:

Je nachdem, ob es sich um eine Info-, Warn- oder Fehlermeldung handelt, kann die Farbe oben entsprechend angepasst werden.

Das HTML baue ich in diesem Fall selber auf. Nur der BODY wird vom Funktionsbaustein erzeugt.

Code

REPORT.

PARAMETERS p_msgno TYPE symsgno DEFAULT '313'.

CLASS lcl_info DEFINITION.
  PUBLIC SECTION.
    METHODS show.
    METHODS get_message_short RETURNING VALUE(rv_message) TYPE string.
    METHODS get_message_long RETURNING VALUE(rt_html) TYPE htmltable.
  PROTECTED SECTION.
    CLASS-METHODS build_box.
    CLASS-DATA mo_box TYPE REF TO cl_gui_dialogbox_container.
    CLASS-DATA mo_html TYPE REF TO cl_gui_html_viewer.
    DATA mv_short TYPE string.
    DATA mt_long  TYPE htmltable.
    CLASS-METHODS handle_close FOR EVENT close OF cl_gui_dialogbox_container.
    METHODS show_message.
ENDCLASS.

CLASS lcl_info IMPLEMENTATION.

  METHOD show.
    build_box( ).
    mv_short = get_message_short( ).
    mt_long  = get_message_long( ).
    show_message( ).
  ENDMETHOD.
  METHOD get_message_short.

    MESSAGE ID sy-msgid
          TYPE sy-msgty
        NUMBER sy-msgno
          WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4
          INTO rv_message.
  ENDMETHOD.

  METHOD build_box.
    IF mo_box IS INITIAL.
      mo_box  = NEW #( width = 900 height = 400 top = 20 left = 400 ).
      mo_html = NEW #( parent = mo_box ).
      SET HANDLER handle_close FOR mo_box.
    ENDIF.
    mo_box->set_caption( sy-title ).
  ENDMETHOD.

  METHOD show_message.
    DATA lv_url TYPE c LENGTH 1000.
    mo_html->load_data( EXPORTING encoding = 'utf-8'
                        IMPORTING assigned_url = lv_url
                        CHANGING data_table = mt_long ).
    mo_html->show_data( url = lv_url ).
  ENDMETHOD.

  METHOD handle_close.
    mo_box->set_visible( space ).
  ENDMETHOD.

  METHOD get_message_long.

    DATA ls_header           TYPE thead.

    DATA lt_itf_text         TYPE STANDARD TABLE OF tline.
    DATA lt_html_text        TYPE STANDARD TABLE OF htmlline.
    DATA lv_object                 TYPE dokhl-object.

    CALL FUNCTION 'DOCU_OBJECT_NAME_CONCATENATE'
      EXPORTING
        docu_id  = 'NA'
        element  = sy-msgid
        addition = sy-msgno
      IMPORTING
        object   = lv_object.


    CALL FUNCTION 'DOCU_GET'
      EXPORTING
        id     = 'NA'
        langu  = sy-langu
        object = lv_object
      IMPORTING
        head   = ls_header
      TABLES
        line   = lt_itf_text
      EXCEPTIONS
        OTHERS = 5.

    DATA(lt_conv_parformats) = VALUE tline_t(
                   ( tdformat = 'U1' tdline = '<h2><div class="w3-panel w3-blue">' )
                   ( tdformat = 'U2' tdline = '<h3><div class="w3-panel w3-light-blue">' )
                   ( tdformat = 'AS' tdline = '<div class="w3-margin">' ) ).

    CALL FUNCTION 'CONVERT_ITF_TO_HTML'
      EXPORTING
        i_header          = ls_header
        i_html_header     = abap_true
      TABLES
        t_itf_text        = lt_itf_text
        t_html_text       = rt_html
        t_conv_parformats = lt_conv_parformats
      EXCEPTIONS
        OTHERS            = 4.
    INSERT '<html><head>' INTO rt_html INDEX 1.
    INSERT '<meta http-equiv="content-type" content="text/html; charset=utf-8">' INTO rt_html INDEX 2.
    INSERT '<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">' INTO rt_html INDEX 3.
    INSERT '<title>test</title></head><body>' INTO rt_html INDEX 4.
    INSERT |<h1><div class="w3-container w3-red">{ mv_short }</div></h1>| INTO rt_html INDEX 5.

    APPEND '</body></html>' TO rt_html.

  ENDMETHOD.

ENDCLASS.

AT SELECTION-SCREEN.

  MESSAGE ID 'BRAIN'
         TYPE 'E'
        NUMBER p_msgno
         WITH 'EINS' 'ZWEI' 'DREI' 'VIER' INTO sy-title.
  NEW lcl_info( )->show( ) .

 

Enno Wulff
Letzte Artikel von Enno Wulff (Alle anzeigen)
Series Navigation<< Pimp My Message [3] – HTML-DarstellungPimp My Message [5] – Masterpiece >>